/**
 * 绘制 map 主文件，mapTool 主体
 */
import mapMix from '../mixins/mapMix';
import { Text, Layer, Rect } from '../render/index';

export default class PageLabel extends mapMix {
	/**
	 * canvas 主画布
	 */
	public canvas: any;

	public pageLabel: any;

	public background: any;

	public stepNum = 3;

	constructor() {
		super({
			id: 'tetris_pageLabel',
		});
		Layer({ // 背景画布
			id: this.id,
			x: 0,
			y: 0,
			scale: { x: 1, y: 1 },
			rotation: 0,
		}).then(canvas => {

			this.canvas = canvas;
			this.mapConst.editor?.konva.add(this.canvas);
			Rect({
				x: 0,
				y: 0,
				width: this.mapConst.pW || 0,
				height: this.mapConst.pH || 0,
				fill: '#000000',
				opacity: 0.6,
			}).then(background => {
				this.background = background;
				this.canvas.add(this.background);
				
				
				Text({
					x: this.mapConst.pW / 2,
					y: this.mapConst.pH / 2,
					fill: '#ffffff',
					text: '',
					fontSize: 18,
					strokeWidth: 4,
				}).then((pageLabel) => {
					this.pageLabel = pageLabel;

					this.pageLabel.on('click', () => {
						this.pageLabelClickFN();
					});
					this.pageLabel.on('tap', () => {
						this.pageLabelClickFN();
					});
					
					this.canvas.add(this.pageLabel);
					this.setPageLabelFN();
				});
			});
		});
	}

	public setPageLabelFN() {
		if(this.mapConst.isPause == 1){
			this.canvas.visible(false);
			return;
		}
		this.canvas.visible(true);
		this.pageLabel.opacity(0);
		this.pageLabel.text(this.mapConst.isPauseLabel);
		this.pageLabel.x(this.mapConst.pW / 2 - (this.pageLabel.width() / 2));
		this.pageLabel.y(this.mapConst.pH / 2 - (this.pageLabel.height() / 2));
		this.pageLabel.opacity(1);
	}

	public pageLabelClickFN(){
		if(
			this.mapConst.isPause !==1 && 
			this.stepNum === 3
		){
			const setTime = setInterval(()=>{
				this.mapConst.isPauseLabel = `${this.stepNum}`;
				--this.stepNum;
				if(!this.stepNum){
					this.stepNum = 3;
					
					this.mapConst.isPause === 3 && this.newGameFN();
					this.mapConst.isPause = 1;
					clearInterval(setTime);
				}
			}, 1000);
		}
	}

	public newGameFN(){
		for (let index = 0; index < this.mapConst.gridIconList.length; index++) {
			const element = this.mapConst.gridIconList[index];
			for (let indexI = 0; indexI < element.length; indexI++) {
				const elementItem = element[indexI];
				if(elementItem.value === 1){
					elementItem.value = 0;
					elementItem.rect.fill('#000000');
				}
			}
		}
	}
}
